import "./index.less";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { Button, Form, Input } from "antd";
import { useSize, useDebounceEffect } from "ahooks";
import { useState } from "react";

export const Component: React.FC = () => {
  const onFinish = (values: any) => {
    console.log("Finish:", values);
  };
  const { width = 0 } = useSize(document.querySelector("body")) || {};
  useDebounceEffect(
    () => {
      console.log("useWindowSize", width);
      if (width < 500) {
        setBoxScale(0.4);
      } else if (width < 700) {
        setBoxScale(0.6);
      } else if (width < 800) {
        setBoxScale(0.6);
      } else if (width < 1000) {
        setBoxScale(0.7);
      } else if (width < 1140) {
        setBoxScale(0.9);
      } else if (width < 1440) {
        setBoxScale(1);
      } else if (width < 1660) {
        setBoxScale(1.2);
      } else if (width < 3060) {
        setBoxScale(1.5);
      } else {
        setBoxScale(2);
      }
    },
    [width],
    { wait: 200 }
  );
  const [boxScale, setBoxScale] = useState(1);
  return (
    <div className="login">
      <div
        style={{ transform: `translate(-50%, -50%) scale(${boxScale})` }}
        className="box"
      >
        <div className="info">
          <div className="title flex-center">
            <div className="img" />
            <div className="text">
              <div>欢迎使用</div>
              <div>记账管理平台</div>
            </div>
          </div>
          <Form
            name="login"
            initialValues={{ remember: true }}
            style={{ maxWidth: 360 }}
            onFinish={onFinish}
          >
            <Form.Item
              name="username"
              rules={[{ required: true, message: "请输入用户名" }]}
            >
              <Input prefix={<UserOutlined />} placeholder="请输入用户名" />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[{ required: true, message: "请输入密码" }]}
            >
              <Input
                prefix={<LockOutlined />}
                type="password"
                placeholder="请输入密码"
              />
            </Form.Item>
            <Form.Item>
              <div className="flex-center">
                <Form.Item
                  name="qrcode"
                  noStyle
                  rules={[
                    {
                      required: true,
                      message: "请输入验证码",
                    },
                  ]}
                >
                  <Input
                    style={{ width: "156px" }}
                    placeholder="请输入验证码"
                  />
                </Form.Item>
                <div className="qrcode">qrcode</div>
              </div>
            </Form.Item>
            <Form.Item>
              <Button block type="primary" htmlType="submit">
                登 录
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  );
};
